<template>
    <div class="page-apply">
        <div class="list-item before-line after-line normal-text">
            <span class="list-item-left normal-text">邀请码</span>
            <div class="list-item-content">
                <input v-model.trim="code" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <div class="list-item before-line after-line normal-text">
            <span class="list-item-left">姓名</span>
            <div class="list-item-content">
                <input v-model="name" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <div class="list-item before-line after-line normal-text">
            <span class="list-item-left normal-text">身份证</span>
            <div class="list-item-content">
                <input v-model.trim="idNumber" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <div class="list-item before-line after-line normal-text">
            <span class="list-item-left normal-text">住址</span>
            <div class="list-item-content">
                <input v-model="address" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <div class="list-item before-line after-line normal-text">
            <span class="list-item-left normal-text">工作单位</span>
            <div class="list-item-content">
                <input v-model="company" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <div class="list-item before-line after-line normal-text">
            <span class="list-item-left normal-text">职业</span>
            <div class="list-item-content">
                <input v-model="job" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <div class="list-item before-line after-line normal-text">
            <div class="normal-text">形象照（必填）</div>
            <div class="tips small-text">请务必正确上传本人照片，否则会影响您的奖金发放</div>
            <div class="img-uploader">
                <div class="img-box" v-if="image">
                    <img :src="image && image.filename ? image.filename : null" mode="aspectFill" />
                    <div class="del-btn" @click="delPhotoImg('image')"><i class="icon">&#xe618;</i></div>
                </div>
                <div class="img-btn img-box text-center" v-else @click="choosePhotoImgs('image')">
                    <div class="add-icon">+</div>
                    <div class="add-text small-text">形象照</div>
                </div>
            </div>
        </div>
        <div class="list-item before-line after-line normal-text">
            <div class="normal-text">身份证照（必填）</div>
            <div class="tips small-text">为核实正确的本人信息，请上传身份证信息</div>
            <div class="inner-box">
                <div class="img-uploader">
                    <div class="img-box" v-if="idCardBack">
                        <img :src="idCardBack && idCardBack.filename ? idCardBack.filename : null" mode="aspectFill" />
                        <div class="del-btn" @click="delPhotoImg('idCardBack')"><i class="icon">&#xe618;</i></div>
                    </div>
                    <div class="img-btn img-box text-center" v-else @click="choosePhotoImgs('idCardBack')">
                        <div class="add-icon">+</div>
                        <div class="add-text small-text">号码面</div>
                    </div>
                </div>
                <div class="img-uploader">
                    <div class="img-box" v-if="idCardPositive">
                        <img :src="idCardPositive && idCardPositive.filename ? idCardPositive.filename : null" mode="aspectFill" />
                        <div class="del-btn" @click="delPhotoImg('idCardPositive')"><i class="icon">&#xe618;</i></div>
                    </div>
                    <div class="img-btn img-box text-center" v-else @click="choosePhotoImgs('idCardPositive')">
                        <div class="add-icon">+</div>
                        <div class="add-text small-text">国徽面</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="btn-wrap">
            <div class="btn btn-mobile btn-red btn-large btn-block btn-round" @click="onClickApply">
                提交申请
            </div>
        </div>
    </div>

</template>
<script lang="ts">
import store from '@/store';
import {
    // currency,
    placeholderImg,
} from '@/lib/utils';
import {
    api,
} from '@/lib/api';
import { Component, Vue } from 'vue-property-decorator';

/** 加盟代理 */
@Component({
    name: 'PartnerApply',
})
export default class PartnerApply extends Vue {
    public placeholderImg: any = placeholderImg;
    public code: any = '';
    public name: any = '';
    public idNumber: any = '';
    public address: any = '';
    public company: any = '';
    public job: any = '';
    public image: any = null;
    public idCardPositive: any = null;
    public idCardBack: any = null;

    public get canSubmit() {
        return this.code && this.name && this.idNumber && this.address && this.company && this.job && this.image && this.idCardPositive && this.idCardBack;
    }

    public async choosePhotoImgs(type: any) {
        const chooseRes = await api.chooseImage({
            size: 1,
        });
        if (chooseRes.errMsg.indexOf('chooseImage:ok') < 0) {
            wx.showToast({
                title: '选择图片失败',
                icon: 'none',
            });
            return;
        }
        const filename = chooseRes.tempFilePaths[0];
        const pos = filename.lastIndexOf('.');
        const ext = pos >= 0 ? filename.substr(pos + 1) : 'ukn';
        Vue.set(this, type, {
            ext,
            filename,
        });
    }

    public delPhotoImg(type: any) {
        Vue.set(this, type, null);
    }

    /**
     * 点击提交申请
     */
    public async onClickApply() {
        this.idNumber = this.idNumber.trim();
        if (!this.canSubmit) {
            wx.showToast({
                title: '请将信息填写完整',
                icon: 'none',
            });
            return;
        }
        if (this.idNumber && !/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.idNumber)) {
            wx.showToast({
                title: '请正确填写身份证',
                icon: 'none',
            });
            return;
        }
        store.commit('utils/startRequest');
        const uploadConfigArr = await Promise.all([
            store.dispatch('framework/uploadConfig', {
                ext: this.image.ext,
                type: 'partner',
            }),
            store.dispatch('framework/uploadConfig', {
                ext: this.idCardPositive.ext,
                type: 'partner',
            }),
            store.dispatch('framework/uploadConfig', {
                ext: this.idCardBack.ext,
                type: 'partner',
            }),
        ]);
        const uploadRes = await Promise.all([
            store.dispatch('framework/uploadImageToAliyun', {
                filename: this.image.filename,
                uploadConfig: uploadConfigArr[0].data,
            }),
            store.dispatch('framework/uploadImageToAliyun', {
                filename: this.idCardPositive.filename,
                uploadConfig: uploadConfigArr[1].data,
            }),
            store.dispatch('framework/uploadImageToAliyun', {
                filename: this.idCardBack.filename,
                uploadConfig: uploadConfigArr[2].data,
            }),
        ]);
        const res = await store.dispatch('partner/partnerApply', {
            code: this.code,
            name: this.name,
            idNumber: this.idNumber,
            address: this.address,
            company: this.company,
            job: this.job,
            image: uploadRes[0].data.key,
            idCardPositive: uploadRes[1].data.key,
            idCardBack: uploadRes[2].data.key,
        });
        store.commit('utils/endRequest');
        if (res.statusCode === 200 && res.data.status === 0) {
            await store.dispatch('user/getApplication');
            wx.showToast({
                title: '申请已提交',
            });
            wx.navigateBack();
        } else {
            wx.showToast({
                title: res.data.message,
                icon: 'none',
            });
        }
    }
    async created() {
        this.image = null;
        this.idCardPositive = null;
        this.idCardBack = null;
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-apply {
    .list-item {
        padding: 30rpx 40rpx;
        .list-item-left {
            line-height: 52rpx;
        }
    }
    .btn-wrap {
        padding: 30rpx 30rpx 10rpx;
    }
    .inner-box {
        display: flex;
        align-items: center;
    }
    .img-uploader {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 13px 13px 0 0;
        .img-box {
            box-sizing: border-box;
            position: relative;
            width: 100%;
            height: 100%;
            border: 2rpx solid #bbbbbb;
            border-radius: 4rpx;
            image {
                width: 100%;
                height: 100%;
                border-radius: 4rpx;
            }
            .del-btn {
                position: absolute;
                top: 0;
                right: 0;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                background-color: rgba(50, 50, 50, .8);
                .icon {
                    color: #ffffff;
                    font-size: 22px;
                }
            }
        }
        .img-btn {
            text-align: center;
            // background-color: #f5f5f5;
            color: #b7b5b5;
            .add-icon {
                font-size: 40px;
                line-height: 60px;
            }
            &:active {
                background-color: #999999;
            }
        }
    }
}

</style>
